<template>
	<view class="content animated fadeIn">
		<popVaild :show.sync="show" @validSuccess="validSuccess" />

		<view @tap="flag = !flag">
			<view class="header animated rubberBand" v-if="flag"><image src="/static/images/logo2.png"></image></view>
			<view class="header animated swing" v-else><image src="/static/images/logo2.png"></image></view>
		</view>

		<view class="list">
			<view class="list-call animated fadeInDown delay-5">
				<image class="img" src="/static/shilu-login/1.png"></image>
				<input class="sl-input" v-model="phone" type="number" maxlength="11" placeholder="输入手机号" />
			</view>
			<view class="list-call  animated fadeInDown delay-5">
				<image class="img" src="/static/shilu-login/2.png"></image>
				<input class="sl-input" v-model="password" type="text" maxlength="32" placeholder="输入密码" password="true" />
			</view>
		</view>

		<u-button
			class="button-login animated fadeInUp faster"
			@getuserinfo="wxGetUserinfo"
			open-type="getUserInfo"
			hover-class="button-hover"
			ripple
			:hair-line="false"
			:loading="loginLoad"
		>
			登录
		</u-button>

		<view class="agreenment">
			<text class="animated fadeInLeft faster" @tap="navgateTo('forget')">忘记密码</text>
			<!-- <navigator url="forget" open-type="navigate">忘记密码</navigator> -->
			<text>|</text>
			<text class="animated fadeInRight faster" @tap="navgateTo('reg')">注册账户</text>
			<!-- <navigator url="reg" open-type="navigate">注册账户</navigator> -->
		</view>
	</view>
</template>

<script>
import popVaild from '@/components/common/popVaild.vue';

import { mapActions } from 'vuex';
export default {
	components: {
		popVaild
	},
	data() {
		return {
			flag: true,
			loginLoad: false,
			show: false,
			phone: '',
			password: ''
		};
	},
	onLoad(op) {
		if (op.params) {
			const params = JSON.parse(op.params);
			this.phone = params.phone;
		}
	},

	methods: {
		navgateTo(key) {
			// 页面跳转
			uni.navigateTo({
				url: `/pages/login/${key}`
			});
		},
		validSuccess(e) {
			if (e.flag) {
				// uni.showToast({
				// 	title: '验证成功',
				// 	icon: 'none'
				// });
				const params = {
					name: this.phone,
					password: this.password.encryptLong()
				};
				this.Login(params).then(res => {
					if (res.flag) {
						this.show = false;
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						});
						uni.switchTab({
							url: '/pages/home/index'
						});
					}
				}).catch(err=>{
					this.show = false;
				})

				//
			}
		},
		wxGetUserinfo(e) {
			uni.setStorageSync('userInfo', JSON.stringify(e.detail));

			this.setWxUserINfo(e.detail);

			let valid_rule = /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;
			if (!valid_rule.test(this.phone)) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的手机号'
				});
				return;
			}
			if (this.password.length < 6 && this.password.length > 12) {
				uni.showToast({
					icon: 'none',
					title: '密码长度须大于6位且小于12位'
				});
				return;
			}

			this.loginLoad = true;
			this.show = true;

		},

		...mapActions(['Login', 'setWxUserINfo'])
	},
	watch: {
		show: {
			handler(newVal, oldVal) {
				if (!newVal) {
					this.loginLoad = false;
				}
			}
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: 100vh;
	width: 750rpx;
	position: fixed;
	top: 0;
	left: 0;
}

.header {
	width: 200rpx;
	height: 200rpx;
	background: transform;
	box-shadow: 0rpx 12rpx 20rpx rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	margin-top: 30rpx;
	margin-left: auto;
	margin-right: auto;
}

.header image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.list {
	display: flex;
	flex-direction: column;
	padding-top: 50rpx;
	padding-left: 70rpx;
	padding-right: 70rpx;
}

.list-call {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 100rpx;
	color: #333333;
	border-bottom: 0.5px solid #e2e2e2;
}

.list-call .img {
	width: 40rpx;
	height: 40rpx;
}

.list-call .sl-input {
	flex: 1;
	text-align: left;
	font-size: 32rpx;
	margin-left: 16rpx;
}

.button-login > button {
	color: #fff !important;
	font-size: 34rpx;
	width: 470rpx;
	height: 100rpx;
	border: 0;
	background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
	/* box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2); */
	border-radius: 50rpx;
	line-height: 100rpx;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100rpx;
	transition: all 0.005s;
}

.button-hover {
	transform: translate(3rpx, 3rpx);
	background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
}

.agreenment {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 30rpx;
	margin-top: 80rpx;
	color: #ffa800;
	text-align: center;
	height: 40rpx;
	line-height: 40rpx;
}

.agreenment text {
	font-size: 24rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
}
</style>
